<template>
  <view class="order-payment-page">
    <!-- 主要内容 -->
    <view class="main-content">
      <!-- 成功图标 -->
      <view class="success-icon">
        <text class="checkmark">✓</text>
      </view>
      
      <!-- 成功信息 -->
      <text class="success-text">支付成功</text>
      
      <!-- 支付金额 -->
      <text class="payment-amount">{{orderData.amount}}</text>
      
      <!-- 预约编号 -->
      <text class="order-number">预约编号: {{orderData.orderNumber}}</text>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="primary-btn" @click="goToHome">返回首页</button>
      <button class="secondary-btn" @click="goToOrderDetails">订单详情</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderData: {
        amount: '0.00',
        orderNumber: '',
        storeInfo: {
          name: '',
          address: ''
        },
        services: [],
        pricing: {
          originalPrice: '0',
          discount: '0',
          coupon: '0',
          finalAmount: '0'
        },
        orderInfo: {
          orderTime: '',
          appointmentTime: '',
          vehicle: '',
          notes: ''
        },
        userInfo: {
          name: '',
          phone: ''
        },
        couponInfo: null
      }
    }
  },
  
  onLoad(options) {
    console.log('[ORDER-PAYMENT] 订单支付页面接收到的数据:', options);
				
    if (options.orderData) {
      try {
        this.orderData = JSON.parse(decodeURIComponent(options.orderData));
        console.log('[ORDER-PAYMENT] 解析后的订单数据:', this.orderData);
        console.log('[ORDER-PAYMENT] 显示的订单号:', this.orderData.orderNumber);
      } catch (error) {
        console.error('[ORDER-PAYMENT] 解析订单数据失败:', error);
        uni.showToast({
          title: '数据解析失败',
          icon: 'none'
        });
      }
    }
  },
  
  methods: {
    // 返回首页
    goToHome() {
      uni.reLaunch({
        url: '/pages/index/index'
      });
    },
    
    // 查看订单详情
    goToOrderDetails() {
      // 直接传递从 confirmOrder 页面接收到的完整数据
      const orderDetailsData = {
        orderNumber: this.orderData.orderNumber,
        amount: this.orderData.amount,
        storeInfo: this.orderData.storeInfo,
        services: this.orderData.services,
        pricing: this.orderData.pricing,
        orderInfo: this.orderData.orderInfo,
        userInfo: this.orderData.userInfo,
        couponInfo: this.orderData.couponInfo
      };
      
      console.log('[ORDER-PAYMENT] 跳转到订单详情，传递数据:', orderDetailsData);
      
      // 跳转到订单详情页面
      uni.navigateTo({
        url: `/pages/orderDetails/orderDetails?orderData=${encodeURIComponent(JSON.stringify(orderDetailsData))}`
      });
    }
  }
}
</script>

<style scoped>
.order-payment-page {
  background-color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}



/* 主要内容 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 30rpx;
}

.success-icon {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  background-color: #4CAF50;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50rpx;
}

.checkmark {
  font-size: 70rpx;
  color: #fff;
  font-weight: bold;
}

.success-text {
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 40rpx;
}

.payment-amount {
  font-size: 56rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.order-number {
  font-size: 32rpx;
  color: #666;
}

/* 操作按钮 */
.action-buttons {
  padding: 60rpx 40rpx;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.primary-btn {
  background-color: #007AFF;
  color: #fff;
  border: none;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 36rpx;
  font-weight: bold;
  width: 50%;
  text-align: center;
}

.primary-btn:active {
  background-color: #0056cc;
}

.secondary-btn {
  background-color: #fff;
  color: #333;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 36rpx;
  font-weight: bold;
  width: 50%;
  text-align: center;
}

.secondary-btn:active {
  background-color: #f8f8f8;
}
</style>
